<template>
    <el-card shadow="always" :body-style="{ padding: '20px' }" class="attr-card">
        <el-form :inline="true">
            <el-form-item label="一级属性名" class="attr-form-item">
                <el-select v-model="category1_id" @change="handleCategory1Change" :disabled="props.category_disabled">
                    <el-option v-for="item in props.category1_list" :key="item.id" :label="item.name"
                        :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="二级属性名" class="attr-form-item">
                <el-select v-model="category2_id" @change="handleCategory2Change" :disabled="props.category_disabled">
                    <el-option v-for="item in categoryStore.category2_attr_list" :key="item.id" :label="item.name"
                        :value="item.id"></el-option>

                </el-select>
            </el-form-item>
            <el-form-item label="三级属性名" class="attr-form-item">
                <el-select v-model="category3_id" :disabled="props.category_disabled">
                    <el-option v-for="item in categoryStore.category3_attr_list" :key="item.id" :label="item.name"
                        :value="item.id"></el-option>
                </el-select>
            </el-form-item>

        </el-form>

    </el-card>
</template>
<script setup lang="ts">
import type { Category } from '@/api/product/attr/type';
import useCategoryStore from '@/store/modules/category'
import { useDebounce } from '@/utils/debounce';
import { onMounted, ref, watch } from 'vue';
// 一级分类id
let category1_id = ref<number>()
// 二级分类id
let category2_id = ref<number>()
// 三级分类id
let category3_id = ref<number>()
// 是否可以添加属性
let is_add_attr = defineModel<boolean>('is_add_attr')
// 发送一级分类id
let send_category1_id = defineModel<number>('category1_id')
// 发送二级分类id
let send_category2_id = defineModel<number>('category2_id')
// 发送三级分类id
let send_category3_id = defineModel<number>('category3_id')
const categoryStore = useCategoryStore()
const props = defineProps<{
    category1_list: Category[],
    // 是否可以选择属性分类,不能选择属性分类是因为正在添加新属性
    category_disabled?: boolean,
    is_attr_spu:number,
    page_no?:number,
    page_size?:number
}>()
const handleCategory1Change = useDebounce(()=>{
    if (category1_id.value) {
        categoryStore.clearCategory2_attr_list();
        categoryStore.clearCategory3_attr_list();
        if(props.is_attr_spu==1){
            categoryStore.clearAttr_list();
        }
        else if(props.is_attr_spu==2){
            categoryStore.clearSpu_list();
        }
        categoryStore.getCategory2_attr_list(category1_id.value);
        category2_id.value = undefined;
        category3_id.value = undefined;
        send_category2_id.value = undefined;
        send_category3_id.value = undefined;
    }
}, 1000)
const handleCategory2Change = useDebounce(()=>{
    if (category2_id.value) {
        categoryStore.clearCategory3_attr_list();
        if(props.is_attr_spu==1){
            categoryStore.clearAttr_list();
        }
        else if(props.is_attr_spu==2){
            categoryStore.clearSpu_list();
        }
        categoryStore.getCategory3_attr_list(category2_id.value);
        category3_id.value = undefined;
        send_category3_id.value = undefined;
    }
}, 1000)
watch(category3_id, () => {
    if (category3_id.value) {
        is_add_attr.value = true;
        if (category1_id.value && category2_id.value) {
            if(props.is_attr_spu==1){
                categoryStore.getAttr_list(category1_id.value, category2_id.value, category3_id.value);
            }
            else if(props.is_attr_spu==2){
                if(props.page_no && props.page_size){
                    categoryStore.getSpu_list(props.page_no,props.page_size,category3_id.value);
                }
            }
            send_category1_id.value = category1_id.value;
            send_category2_id.value = category2_id.value;
            send_category3_id.value = category3_id.value;
        }
    }
    else {
        is_add_attr.value = false
    }
})
onMounted(()=>{
    if(props.is_attr_spu==1){
        categoryStore.clearAttr_list();
    }
    else if(props.is_attr_spu==2){
        categoryStore.clearSpu_list();
    }
})
</script>
<style scoped lang="less"></style>
